.layout-wrapper {
    position: relative;
    max-width: 1440px;
    min-height: 100vh;
    height: auto;
    margin: 0 auto;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  a {
    cursor: url("images/cursor.cur"), pointer;
  }

  * {
  box-sizing: border-box;
}

.floating {
  border-radius: 5px;
  
 
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

  .main {
  position: absolute;
  padding: 5px;
  left: 340px;
  width: 600px;
  height: 600px;

  background-image: url(images/nen.jpg);
  background-repeat: no-repeat;
  background-size: cover;



  /* VIỀN GOTHIC */
  border-radius: 5px;
  box-shadow:
  0 0 18px rgba(90, 0, 0, 0.35),
  inset 0 0 12px rgba(120, 0, 0, 0.25);
  animation: float 5s ease-in-out infinite;



  z-index: 1;
}



.under-profile{
   position:absolute;
  padding: 5px;
  top:10px;
  left: 10px;
  width:260px;
  height: 150px;
  background-color:#000;
  z-index: 1;

  
   
  box-shadow:
  0 0 18px rgba(90, 0, 0, 0.35),
  inset 0 0 12px rgba(120, 0, 0, 0.25);
  animation: float 5s ease-in-out infinite;
}

.frame {
  position:absolute;
  padding: 5px;
  top:15px;
  left: 15px;
  width:140px;
  height: 135px;
  background-image: url(images/frame.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 3;

 
  animation: float 5s ease-in-out infinite;
}

.profile {
  position:absolute;
  padding: 5px;
  top:25px;
  left: 20px;
  width:125px;
  height: 125px;
  background-image: url(images/nikaido.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;


  animation: float 5s ease-in-out infinite;
}

.text-profile{
position: absolute;
top: 30px;
left:150px;
font-size: 15px;
color:rgba(120, 0, 0, 1);
z-index: 4;
animation: float 7s ease-in-out infinite;
}

.uzumaki{
  position: absolute;
top: 220px;
left:10px;
width:260px;
height:90px;
background-image: url(images/uzumaki.gif);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
color:rgba(90, 0, 0, 1);
z-index: 4;
animation: float 7s ease-in-out infinite;

}


.header {
  position:absolute;
  padding: 5px;
  top:450px;
  left: 280px;
  width:310px;
  height: 140px;
  background-image: url(images/header.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 3;

  
  
  box-shadow:
  0 0 18px rgba(90, 0, 0, 0.35),
  inset 0 0 12px rgba(120, 0, 0, 0.25);
  animation: float 7s ease-in-out infinite;
}


.logo {
  position:absolute;
  padding: 5px;
  top: 30px;
  left: 10px;
  width:200px;
  height: 56px;
  background-image: url(images/logo.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 5;
  animation: float 7s ease-in-out infinite;
}

.welcome {
  position:absolute;
  padding: 5px;
  top: 10px;
  left: 290px;
  width:270px;
  height: 210px;
  background-image: url(images/welcome.png);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 4;
  animation: float 7s ease-in-out infinite;
}


.detail {
  position: absolute;
  padding: 5px;
  top: 320px;
  left: 10px;
  width: 260px;
  height: 270px;
  background-color: black;
  z-index: 4;

  border-radius: 5px;
  border: 2px solid #2b2b2b;
  box-shadow:
    0 0 18px rgba(90, 0, 0, 0.35),
    inset 0 0 12px rgba(120, 0, 0, 0.25);

  font-family: 'VT323';
  color: #e0e0e0;
  display: flex;
  flex-direction: column;  /* các item chồng dọc */
  gap: 6px;
  overflow-y: auto;
}

/* Thanh tiêu đề */
.detail-title {
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 4px;
  color: rgba(90, 0, 0, 1);
  text-align: left;
}

/* Từng hàng */
.detail-item {
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px;
  font-size: 15px;
  text-transform: lowercase;
  border-radius: 3px;
  flex: 1;  /* chia đều chiều cao còn lại */
  display: flex;
  align-items: flex-start;
}





/* import font VT323 */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

.about-me {
  position: absolute;
  padding: 5px;
  top: 220px;
  left: 280px;
  width: 310px;
  height: 220px;
  background-color: black;
  z-index: 2;

  border-radius: 5px;
  border: 2px solid #2b2b2b;
  box-shadow:
    0 0 18px rgba(90, 0, 0, 0.35),
    inset 0 0 12px rgba(120, 0, 0, 0.25);

  font-family: 'VT323', monospace;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Tiêu đề */
.about-title {
  font-size: 20px;
  letter-spacing: 1px;
  text-transform: lowercase;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 4px;
  color: rgba(90, 0, 0, 1);
  text-align: left;
  animation: float 6s ease-in-out infinite;
}

/* Nội dung */
.about-content {
  font-size: 15px;
  color: #ffffff;
  text-align: left;
  line-height: 1.4;
  flex: 1; /* chiếm phần còn lại */
  overflow-y: auto; /* scroll nếu text dài */
  animation: float 6s ease-in-out infinite;
}


.intro {
  position: absolute;
  top: 170px;
  left: 10px;
  width: 260px;
  height: 40px;
  background-color: black;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'VT323', monospace;
  font-size: 24px;
  color: rgba(90, 0, 0, 1);

  text-decoration: none; /* bỏ gạch chân link */
  cursor: pointer;

  border-radius: 5px;
  border: 2px solid #2b2b2b;
  box-shadow:
    0 0 18px rgba(90, 0, 0, 0.35),
    inset 0 0 12px rgba(120, 0, 0, 0.25);

  letter-spacing: 1px;
  text-align: center;

  transition: all 0.3s ease;
}

/* hover – đỏ sáng hơn, nổi lên */
.intro:hover {
  color: rgba(150, 0, 0, 1);
  box-shadow:
    0 0 25px rgba(150, 0, 0, 0.6),
    inset 0 0 14px rgba(120, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* click */
.intro:active {
  transform: translateY(0);
  box-shadow:
    0 0 10px rgba(90, 0, 0, 0.4),
    inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.detail,
.about-me,
.intro {
  background-color: #000;
  border-radius: 5px;
   border: 2px solid #2b2b2b;
  box-shadow:
  0 0 18px rgba(90, 0, 0, 0.35),
  inset 0 0 12px rgba(120, 0, 0, 0.25);
  animation: float 6s ease-in-out infinite;
}


.cloud-1 {
  position:absolute;
  padding: 5px;
  top: 200px;
  left: 80px;
  width:100px;
  height: 20px;
  z-index: 3;

  animation: cloudMove 18s linear infinite;
}

@keyframes cloudMove {
  from { transform: translateX(0); }
  to   { transform: translateX(40px); }
}




@keyframes batFly {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}